let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

let test = document.querySelector(".test")

let iHtml = ""

data.forEach(function (v, i) {
    iHtml += `<i class="${i === 0 ? "ii" : ""}" price="${v.price}" unitPrice="${v.unitPrice}"">  ${v.count}</i>`


})
test.innerHTML += iHtml


let span = document.querySelector(".rmb span")
let i = document.querySelector(".rmb i")
let is = document.querySelectorAll(".test i")
// console.log(is);
is.forEach(function (v) {
    // console.log(v);
    v.addEventListener("click", function () {
        // console.log(this);
        for (let x = 0; x < is.length; x++) {
            is[x].classList.remove("ii")
        }
        this.classList.add("ii")
        span.innerHTML = this.getAttribute("price")
        i.innerHTML = this.getAttribute("unitPrice")

        //    
    })

})
// 选项卡效果
let spans = document.querySelectorAll(".tab span")
let contentDiv = document.querySelectorAll(".tab-left .contentDiv")
console.log(contentDiv);
// console.log(spans);
spans.forEach(function (v, i) {
    v.addEventListener("click", function () {
        for (let x = 0; x < spans.length; x++) {
            spans[x].classList.remove("tabSpan")
            contentDiv[x].classList.remove("contentDivs")
        }
        contentDiv[i].classList.add("contentDivs")
        v.classList.add("tabSpan")
    })

})